<template>
    <!-- 概览 -->
    <el-card class="home-overview" shadow="hover">
        <!-- 用户信息 -->
        <div class="overview">
            <div class="user-meta">
                <div class="avatar">
                    <el-avatar
                        :size="100"
                        :src="userProfile.avatar"
                        fit="cover"
                    />
                </div>
                <h4>{{ useUserStore.profile.nickname }}</h4>
            </div>
            <div class="item">
                <router-link to="/member/info">
                    <span class="iconfont"
                        ><el-icon><Avatar /></el-icon
                    ></span>
                    <p>个人信息</p>
                </router-link>
                <router-link to="/member/securitySett">
                    <span class="iconfont"
                        ><el-icon><ElementPlus /></el-icon
                    ></span>
                    <p>安全设置</p>
                </router-link>
                <router-link to="/member/address">
                    <span class="iconfont"
                        ><el-icon><LocationInformation /></el-icon
                    ></span>
                    <p>地址管理</p>
                </router-link>
            </div>
        </div>
    </el-card>
</template>
<script setup>
import { reactive } from 'vue'
import { userStore } from '@/stores/user'
const useUserStore = userStore()
const userProfile = reactive({})
userProfile.avatar = useUserStore.profile.avatar
    ? useUserStore.profile.avatar
    : 'https://img.tianzhongli.shop/i/2023/03/14/default.webp'
</script>
<style scoped lang="scss">
.home-overview {
    height: 132px;
    background: url(https://img.tianzhongli.shop/i/2023/03/20/previewFix.webp)
        no-repeat center / cover;
    .overview {
        display: flex;
        .user-meta {
            flex: 1;
            display: flex;
            align-items: center;
            .avatar {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 60px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            h4 {
                padding-left: 26px;
                font-size: 18px;
                font-weight: normal;
                color: white;
            }
        }
        .item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;
            &:first-child {
                border-right: 1px solid #f4f4f4;
            }
            a {
                color: white;
                font-size: 16px;
                text-align: center;
                .iconfont {
                    font-size: 32px;
                }
                p {
                    line-height: 32px;
                }
            }
        }
    }
}
</style>
